<template>
	<!-- 添加乘客 -->
	<view class="add_passenger">
		<!-- 拍照OCR -->
<!-- 		<view class="btn_wraper" @click="ocrRecognition">
			<image class="btn_icon" src="../../static/images/photo.png"></image>
			<view class="btn_text">拍身份证新增</view>
		</view> -->
		<!-- 乘车人表单 -->
		<view class="form_wraper">
			<form @submit="operatePassenger" class="my_form">
				<view class="item">
					<view class="title">乘客类型</view>
					<view class="right">
						<radio-group name="passengerType" @change="radioChange">
							<label class="my_radio" v-for="item in ticketTypes" :key="item.type">
								<radio class="my_radio_item" :value="item.type" color="#007AFF" :checked="params.passengerType == item.type" />
								<text class="radio_text" :class="{ 'radio_text--active': params.passengerType == item.type }">{{ item.text }}</text>
							</label>
						</radio-group>
					</view>
				</view>
				<view class="item">
					<view class="title">乘客姓名</view>
					<view class="right"><input class="my_input" :value="params.name" name="name" placeholder="请输入乘客姓名" /></view>
				</view>
				<view class="item">
					<view class="title">证件类型</view>
					<view class="right"><view class="text">身份证</view></view>
				</view>
				<view class="item">
					<view class="title">证件号码</view>
					<view class="right"><input type="idcard" class="my_input" maxlength="20" :value="params.certNo" name="certNo" placeholder="请输入证件号码" /></view>
				</view>
				<view class="item">
					<view class="title">手机号码</view>
					<view class="right">
						<input type="number" class="my_input" maxlength="11" :value="params.phone" name="phone" placeholder="请输入手机号码" />
					</view>
				</view>
				<view class="line"></view>
				<view class="item">
					<view class="title">标记为本人</view>
					<view class="right"><switch class="my_switch" name="self" :checked="params.self" color="#8B96AC" /></view>
				</view>
				<view class="btn_wraper">
					<button form-type="submit" class="btn">保存</button>
					<!-- <button type="default" form-type="reset">重置</button> -->
				</view>
			</form>
			<view class="tip"><text class="tip_content">乘客姓名、乘客证件号、性别、年龄用于下单及购买保险</text></view>
		</view>
	</view>
</template>

<script>
// components
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue';
// api
import { $addPassenger, $editPassenger, $deletePassenger, $getPassengerDetail  } from '../../service/index';
// utils
import { myShowToast, myShowModal,IdentityCodeValid, verifyPhone, haveSpecial } from '../../utils/utils.js';
export default {
	components: { uniIcons },
	data() {
		return {
			ticketTypes: [
				{
					type: 'ADULT',
					text: '成人票'
				}
				// ,
				// {
				// 	type: 'CHILD',
				// 	text: '儿童票'
				// },
				// {
				// 	type: 'STUDENT',
				// 	text: '学生票'
				// },
				// {
				// 	type: 'SOLDIER',
				// 	text: '军人票'
				// }
			], // 乘客类型
			params: {
				// 乘客信息
				passengerType: 'ADULT', // 乘客类型 ADULT CHILDREN
				name: '', // 乘客姓名
				certType: 'ID_CERT', // 证件类型  ID_CERT身份证
				certNo: '', // 证件号码
				phone: '', // 乘客手机号
				self: false // 是否被标记为本人
			},
			type:"add", // 添加/编辑
		};
	},
	methods: {
		// 添加/编辑--乘客
		operatePassenger(e) {
			var formdata = e.detail.value;
			const params = Object.assign({}, this.params, formdata);
			if (!params.name) {
				myShowToast('请输入乘客姓名');
				return;
			} else if (params.name && haveSpecial(params.name)) {
				myShowToast('乘客姓名中请勿包含特殊字符');
				return;
			}
			if (!params.certNo) {
				myShowToast('请输入证件号码');
				return;
			} else if (params.certNo && !IdentityCodeValid(params.certNo)) {
				myShowToast('证件号码格式不正确');
				return;
			}
			if (!params.phone) {
				myShowToast('请输入手机号码');
				return;
			} else if (params.phone && !verifyPhone(params.phone)) {
				myShowToast('手机号码格式不正确');
				return;
			}
			const type = this.type;
			switch (type){
				case 'add':
					this.addPassenger(params); // 新增
					break;
				case 'edit':
					this.editPassenger(params); // 编辑
					break;
				default:
					break;
			}

		},
		// 单选改变 改变选中样式
		radioChange(item) {
			this.params.passengerType = item.detail.value;
		},
		// OCR识别身份证
		ocrRecognition() {
			myShowToast('暂未添加该功能~');
		},
		// 获取乘车人详情
		getPassengerDetail(id) {
			$getPassengerDetail({},id).then(res => {
				const data = res.data;
				if(!data.success){
					myShowModal(data.message || '网络错误');
					return;
				}
				this.params = Object.assign({},this.params,data.content || {});
			}).catch(err=>{
				console.log(err)
			});
		},
		// 新增乘车人信息
		addPassenger(params){
			$addPassenger(params)
				.then(res => {
					const data = res.data;
					if (!data.success) {
						myShowModal(data.message || '网络错误');
						return;
					}
					uni.showModal({
					    title: '提示',
					    content: '添加成功',
						showCancel:false,
					    success: (res) => {
					        if (res.confirm) {
								uni.navigateBack({
									delta: 1
								})
					        }
					    }
					});
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 编辑乘车人信息
		editPassenger(params){
			const {id,userId,...editParams} = params;
			$editPassenger(editParams,id).then(res => {
				const data = res.data;
				if(!data.success){
					myShowModal(data.message || '网络错误');
					return;
				}
				uni.showModal({
				    title: '提示',
				    content: '修改成功',
					showCancel:false,
				    success: (res) => {
				        if (res.confirm) {
							uni.navigateBack({
								delta: 1
							})
				        }
				    }
				});
			}).catch(err=>{
				console.log(err)
			});
		}
		
	},
	onLoad(options){
		this.type = options.type || 'add';
		if(options.type == 'edit'){
			this.getPassengerDetail(options.id); // 编辑查询详情回显
		}
	}
};
</script>

<style lang="scss" scoped>
.add_passenger {
	border-top: 20rpx solid #f4f6f9;
	background-color: #ffffff;
	.btn_wraper {
		margin: 47rpx auto;
		width: 560rpx;
		height: 88rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(230, 235, 244, 0.89);
		border-radius: 40rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 600;
		color: #3c8cff;
		.btn_icon {
			display: inline-block;
			margin-right: 16rpx;
			position: relative;
			width: 47rpx;
			height: 38rpx;
			vertical-align: -4rpx;
		}
		.btn_text {
			display: inline-block;
			font-size: 32rpx;
		}
	}
	.form_wraper {
	}
	.tip {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #8b96ac;
		text-align: center;

		// padding-left: 10rpx;
		padding-bottom: 51rpx;
		.tip_content {
			position: relative;
		}
		.tip_content::before {
			content: '*';
			position: absolute;
			// left: -8rpx;
			top: 0;
			left: -8rpx;
			color: #f22424;
			font-size: 24rpx;
		}
	}
}
</style>
